<template>
<view>
	<view class="body">
	    <view class="remark">优先精准匹配,助力机构招聘</view>
		<view class="num">可群发数量:{{num}}</view>
		<!-- <view class="list">
		   <view class='title'>发送数量:</view>
			<input class="view_input_input1" type="number"
			v-model="form.num"
			placeholder-class="placeholderClass" placeholder="发送数量"/>
		</view> -->
	    <view class="list">
	        <view class='title'>工作岗位:</view>
			<picker @change="bindJob" :value="index" :range="job"
			class="view_input_input1" range-key="name">
				<view>{{job[index] ? job[index]['name'] : '请选择'}}</view>
			</picker>
	    </view>
	    <view class="list">
	        <view class='title'>工作城市:</view>
	        <pickerAddress class="view_input_input1" @change="cityChange">
	        	{{form.city ? form.city : '所在城市'}}
	        </pickerAddress>
	    </view>
	    <view class='title'>工作经验:</view>
	    <view class="item_list">
	        <view class="item" :class="{borderTrue : form.exp == item}"
	        v-for="(item,index) in workTime" :key="index" 
			@click="select(item)">{{item}}</view>
	    </view>
		<view class='title'>群发数量:</view>
		<view class="item_list">
		    <view class="item" :class="{borderTrue : form.sendNum == item}"
		    v-for="(item,index) in sendNum" :key="index" 
			@click="sendNumSelect(item)">{{item}}</view>
		</view>
	    <view class='title'>编辑消息:</view>
	
	     <textarea bindinput="bindSend" maxlength="-1" 
	     placeholder="群发消息" v-model="form.message"/>
	</view>
	<view class="footer">
	    <view></view>
	    <view v-if="sendTrue" @click="send">发送</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
import pickerAddress from '@/modules/uni-city/pickerAddress.vue'
export default {
	data() {
		return{
			sendTrue:true,
			num:0,
			job:[],
			index:0,
			form:{
				city:'',
				exp:'',
				sendNum:''
			},
			workTime: ['1年', '2年', '3年','4年','5年以上'],
			sendNum:['50','100'],
			groupId:0
		}
	},
	components: {pickerAddress},
	onLoad:function(e){
		this.num = e.num
		this.groupId = e.groupId
		this.getJob()
	},
	methods:{
		getJob:function(){
			var that = this
			request({
				url: 'job/list',
				method: 'get',
				success: (res) => {
					that.job = res.data.data
					that.form.job = res.data.data[0].name
				},
			})
		},
		bindJob:function(e){
			this.index = e.detail.value
			this.form.job = this.job[e.detail.value]['name']
		},
		cityChange:function(e){
			let city = e.data[1]
			this.form.city = city.replace('市','');
		},
		select:function(item){
			this.form.exp = item
		},
		sendNumSelect:function(item){
			if(parseInt(item) > parseInt(this.num)){
				uni.showToast({
					title: '可用群发数量为'+this.num+'不能大于可用群发数量',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			this.form.sendNum = item
		},
		send:function(){
			if(!this.form.message){
				uni.showToast({
					title: '请输入群发消息!!',
					icon: "none", 
					position:'bottom',
				});
			    return;
			}
			if(!this.form.sendNum){
				uni.showToast({
					title: '请选择群发数量!!',
					icon: "none", 
					position:'bottom',
				});
			    return;
			}
			this.form.uid = uni.getStorageSync('uid')
			this.form.groupId = this.groupId
			this.sendTrue = false
			var that = this
			request({
				url: 'group/send',
				method: 'post',
				data:this.form,
				success: (res) => {
					if(res.data.code == 1){
						that.num = that.num - that.form.num
						uni.showToast({
							title:'发送成功',
							icon: 'success',
							duration: 2000,
							success() {
								setTimeout(function() {
									uni.navigateBack();
								}, 2000);
							}
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: "none", 
							position:'bottom',
						});
						return;
					}
				},
			})
		}
	}
}
</script>
<style>
.body{
    width:100%;
}
.list{
    width:100%;
    display:flex;
    flex-direction: row;
    height:70rpx;
    line-height:70rpx;
    border-bottom: 1rpx dashed #cccccc;
}
.title{
    font-weight: bold;
    font-size:18px;
    width:30%;
    text-align: center;
	height:70rpx;
	line-height: 70rpx;
}
.list picker{
    width:65%;
}
.remark{
    text-align: center;
    height:80rpx;
    line-height: 80rpx;
    color:#999999;
}
.footer{
    display: flex;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
    height:100rpx;
    border-top: 3px solid #e6e6e6;
}
.footer view{width:50%;display: flex;justify-content: center;align-items: center;}
.footer :nth-child(1){background:#fff}
.footer :nth-child(2){background:#44b549;color:#fff;}
.item{
    width:21%;
    height:80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-right: 20rpx;
    margin-top:20rpx;
    border:1rpx solid #cccccc;
}
.item_list{
    padding:0 20rpx 10rpx 20rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1rpx dashed #cccccc;
}
textarea{
    margin-left:20rpx;
    width:92%;
    height:200rpx;
    padding: 10rpx 10rpx 10rpx 10rpx;
    border: 1rpx dashed #cccccc;
}
.num{
    height:60rpx;
    line-height: 60rpx;
    text-align: center;
    font-weight: bold;
    font-size:18px;
}
.borderTrue{border:2rpx solid #b30000;}
</style>